<template>
	<!-- 物联设备类别 -->
	<div> 
		<el-row :gutter="20">
			<el-row type="flex" justify="space-between">
				<span>{{ fireSystemName }}</span>
				<div class="more-btns">
					<el-button type="primary" icon="el-icon-plus" @click="addCategory()" size="mini"></el-button>
				</div>
			</el-row>
			<el-table 
            :data="TableData"
             border 
             ref="FireEqTableList"
             style="width: 100%">
             <el-table-column width="50">
    		    		  <template slot-scope="scope">
    		    		  	<el-radio v-model="radio" @change.native="changeItem(scope.$index,scope.row)" :label="scope.row.id">&nbsp;</el-radio>
    		    		  </template>
    		     </el-table-column>
    		    	<el-table-column label="序号" type="index" width="50"></el-table-column>
    		    	<el-table-column label="消防系统名称" prop="name"></el-table-column>
<!--     		    	<el-table-column label="物联设备类型" prop="name"></el-table-column> -->
    		    	<el-table-column label="是否高危" prop="isTop">
    		    		<template slot-scope="scope">
    		    			<p>{{ (scope.row.monitorType == '2'||scope.row.monitorType == '1,2') ? '是':'否' }}</p>
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="是否重点" prop="isSupportSendDown">
    		    		<template slot-scope="scope">
    		    			<p>{{ (scope.row.monitorType == '1'||scope.row.monitorType == '1,2') ? '是':'否' }}</p>
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="备注" prop="remarks"></el-table-column>
    		    	<el-table-column label="列表图片" >
    		    		<template v-if="JSON.parse(scope.row.icon).icon != ''" slot-scope="scope">
    		    			<img :src="JSON.parse(scope.row.icon).icon.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="JSON.parse(scope.row.icon).icon.split(',')[0]">
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="详细图片" prop="detailIcon">
    		    		<template v-if="JSON.parse(scope.row.icon).detailIcon != ''" slot-scope="scope">
    		    			<img :src="JSON.parse(scope.row.icon).detailIcon.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="JSON.parse(scope.row.icon).detailIcon.split(',')[0]">
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="操作" width="150">
    		    	   	<template slot-scope="scope">
    		    	   		<el-button @click="showSon(scope.row)" type="text" size="small">子集</el-button>
    		    	   		<el-button @click="editCategory(scope.row)" type="text" size="small">编辑</el-button>
    		    	   		<el-button @click="deleteFireStation(scope.row)" type="text" size="small">删除</el-button>
    		    	   	</template>
    		    	</el-table-column>
    		    	 <el-table-column type="expand" width='1'>
    		    	 	<template slot-scope="scope">
    		    	 		  <subset-table :parentselected.sync="radio" :changeItem="changeItem" :rowInfo="scope.row"></subset-table>
    		    	 	</template>
    		    	 </el-table-column>
               </el-table>
               <!-- 分页 -->
               <el-pagination 
                   v-show="TableData.length > 0"
                   background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page.sync="currentPage"
                   :page-sizes="[10, 50, 100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
              </el-pagination>

               <!-- 新增/编辑弹框  -->
               <el-dialog
      			  :close-on-click-modal="false"
                  :title="dialogCategoryTitle"
                  width="600px"
                  top='10vh'
                  v-if="dialogCategoryBaseInfo"
                  :visible.sync="dialogCategoryBaseInfo"
                  @close="closeCategoryInfo"
                  v-dialogDrag>
                  <update-fire-ctl-category :fireSystemId="rowInfo.fireSystemId" :parentId="rowInfo.id" :oldInfo="categoryInfo" :closeFun="closeCategoryInfo">
                  </update-fire-ctl-category>
              </el-dialog>
		</el-row>
    </div>
</template>
<script>
import util from '@/utils/util'
import { getFireCtlCategoryList,delFcfC } from '@/api/sysConfig'
import UpdateFireCtlCategory from '../Dialog/UpdateFireCtlCategory'

export default {
  name: 'SubsetTable',
  components: {
    UpdateFireCtlCategory
  },
  props: {
    rowInfo: {
      required: true
    },
    changeItem: {
      type:Function,
      required: true
    },
    parentselected: ''
  },
	created() {
		var self = this
		util.ilinkArrHandle.delDicArr_keyVal(55, function(arr){
            var options = arr;
			if (options.length > 0) {
				for (var i = 0; i < options.length; i++) {
					if(options[i].id == self.rowInfo.fireSystemId) {
						self.fireSystemName = options[i].name;
					}
				}
			}
        })
		self.getTableList();
	},
	data() {
		return {
      		radio:0,
			loading: false,
      		fireSystemName:'',
			/* 分页 */
			currentPage: 1,
			pageSize: 10,
			total: 0,
			TableData: [],
			/* 弹框 */
			dialogCategoryTitle:'',
			dialogCategoryBaseInfo: false,
			categoryInfo:'',
		}
	},
	methods: {
		getTableList(pageIndex,pageSize) {
			var self = this;
			self.loading = true;
			if (pageIndex) {
				self.currentPage = pageIndex;
			}
			if (pageSize) {
				self.pageSize = pageSize;
			}
			var paramList = {
				queryType: 1,
				pageIndex: self.currentPage,
				pageSize: self.pageSize,
				id:self.rowInfo.id,
			};
			getFireCtlCategoryList(paramList).then(res => {
				self.TableData = res.data;
				self.total = res.total;
				self.loading = false;
			});
		},
		/*新增类别*/
		addCategory() {
			var self = this;
			self.dialogCategoryTitle = "新增物联设备类别";
			self.dialogCategoryBaseInfo = true;
			self.categoryInfo = {};
		},
		/* 编辑类别 */
		editCategory(row) {
			var self = this;
			self.dialogCategoryTitle = "编辑物联设备类别";
			self.dialogCategoryBaseInfo = true;
			self.categoryInfo = row;
		},
		/*关闭类别弹框*/
		closeCategoryInfo(flag) {
			var self = this;
			self.dialogCategoryBaseInfo = false;
			if(flag) {
				self.getTableList(this.categoryInfo.id?'':1);
			}
		},
		/* 删除物联设备类别 */
		deleteFireStation(row) {
			var self = this;
			self.$confirm("确定删除该物联设备类别吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
            	delFcfC({id: row.id}).then(res => {
            		if (res.status === 200) {
            	    	self.$message({
            	    		type: 'success',
                            message: '删除成功!'
                        });
                        self.getTableList()
                    } else {
                        self.$message.error(res.info);
                    }
            	});
            });
		},
		handleSizeChange(pageSize) {
			this.getTableList(1, pageSize);
		},
		handleCurrentChange(currentPage) {
			this.getTableList(currentPage)
		},
		// 展开子集
		showSon(row) {
			this.$refs.FireEqTableList.toggleRowExpansion(row)
		},
	},
  watch: {
    parentselected: {
      handler(val) {
        this.radio = val;
      },
      deep: true,
    }
  }
}
</script>